<template>
    <div class="person">
        姓 : <input type="text" v-model="firstName"> <br>
        名 : <input type="text" v-model="lastName"> <br>
        全名 :<span>{{ fullName}}</span>  <br>

        <button @click="changePerson">修改名字</button>


    </div>
</template>

<!-- <script lang="ts">
    export default(){
        name:'Person',
    }
</script> -->

<script lang="ts" setup name="Person">
    // import {ref,reactive} from 'vue'
    import {ref,computed} from 'vue'
    //数据
   let firstName=ref('zhang')
   let lastName=ref('san')

//    //只读
//    let fullName = computed(()=>{
//         console.log(1)
//         return firstName.value.slice(0,1).toUpperCase()+firstName.value.slice(1)+'-'+lastName.value
//    })

    //可读可写
    let fullName=computed({
        get(){
        return firstName.value.slice(0,1).toUpperCase()+firstName.value.slice(1)+'-'+lastName.value

        },
        set(val){
            const [str1,str2] =val.split('-')
            firstName.value=str1
            lastName.value=str2
        }
    })

    //方法
  function changePerson(){
    fullName.value='li-si'
  }

</script>






<style scoped>
    .person {
        background-color: aqua;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button {
        margin: 0 5px;
    }
</style>